<template>
	<div>mittTest</div>
	<div>Vue2.x 使用 EventBus 进行组件通信，而 Vue3.x 推荐使用 mitt.js</div>
</template>

<script>
	import mitt from 'mitt'
	import {
		getCurrentInstance
	} from 'vue'
	const emitter = mitt()
	// listen to an event
	emitter.on('foo', e => console.log('foo', e))
	// listen to all events
	emitter.on('*', (type, e) => console.log('all events',type, e))
	emitter.emit('foo', {
		a: 'b'
	})
	// clearing all events
	emitter.all.clear()
	emitter.emit('foo', {
		a: 'b'
	}) //没有消息

	function onFoo() {
		console.log('onFoo')
	}
	emitter.on('foo', onFoo) // listen
	emitter.emit('foo') //onFoo
	emitter.off('foo', onFoo) // unlisten
	emitter.emit('foo') //没有消息

	export default {
		data() {
			return {}
		},
		mounted() {
			this.mybusTest();

		},
		methods: {
			// 方式1，使用 main.js 中挂载全局属性。
			mybusTest() {
				console.log('mybusTest================')
				console.log('this.$mybus', this.$mybus)
				this.$mybus.on('mybus', e => console.log('mybus', e))
				this.$mybus.emit('mybus', {
					name: 'mybus'
				})
				console.log('getCurrentInstance()', getCurrentInstance())
				
				//1经过测试，打包到dist以后，ctx下面的值是拿不到的，本地可以
				//2使用 proxy （强烈推荐）
				const {
					proxy,
					ctx
				} = getCurrentInstance()
				console.log('proxy.$mybus', proxy.$mybus)
			},

		},

	}
</script>

<style>
</style>
